<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <form class="layui-form">
            <div class="layui-btn-group">
                <button id="listDelete" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
                <a class="layui-btn layui-btn-sm" href="<?php echo \yii\helpers\Url::to(['create']) ?>" ><i class="layui-icon layui-icon-add-1"></i>发送语音消息</a>
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="search" ><i class="layui-icon layui-icon-search"></i>搜索</button>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="" class="layui-form-label">接收号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" placeholder="请输入接收号码" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">操作人</label>
                    <div class="layui-input-inline">
                        <select name="user_id" lay-search>
                            <option value=""></option>
                            <?php foreach ($users as $user){ ?>
                                <option value="<?php echo $user['id']; ?>"><?php echo $user['username']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">发送时间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="created_at_start" name="created_at_start" placeholder="请选择开始时间" class="layui-input" readonly>
                    </div>
                    <div class="layui-form-mid layui-word-aux">-</div>
                    <div class="layui-input-inline">
                        <input type="text" id="created_at_end" name="created_at_end" placeholder="请选择结束时间" class="layui-input" readonly>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            <a href="{{d.play_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-play"></i>播放</a>
            <a href="{{d.download_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-download-circle"></i>下载</a>
        </script>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['index']);
$destroy_url = yii\helpers\Url::to(['destroy']);
$js = <<<JS
    layui.use(['form','element','table', 'layer','laydate'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        var laydate = layui.laydate;  
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 'full-200'
            ,url: '{$url}' 
            ,page: true 
            ,toolbar: false 
            ,cols: [[ 
                {type: 'checkbox'}
                ,{field: 'phone', title: '接收号码'}
                ,{field: 'content', title: '发送内容'}
                ,{field: 'spd', title: '语速',width:60}
                ,{field: 'pit', title: '音调',width:60}
                ,{field: 'vol', title: '音量',width:60}
                ,{field: 'per', title: '发音人',width:160}
                ,{field: 'trunk_name', title: '中继线路',width:100}
                ,{field: 'user_name', title: '操作人',width:100}
                ,{field: 'created_at', title: '操作时间',width:160}
                ,{title: '操作',toolbar:'#options',width:160}
            ]]
        });
        
        //按钮批量删除
        $("#listDelete").click(function () {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length>0){
                $.each(hasCheckData,function (index,element) {
                    ids.push(element.id)
                })
            }
            if (ids.length>0){
                layer.confirm('确认删除吗？', function(index){
                    $.post('{$destroy_url}',{ids:ids},function (result) {
                        if (result.code==0){
                            dataTable.reload()
                        }
                        layer.close(index);
                        layer.msg(result.msg,{icon:6})
                    });
                })
            }else {
                layer.msg('请选择删除项',{icon:5})
            }
        })
        
        //搜索
        form.on('submit(search)',function(data) {
            dataTable.reload({
                where : data.field,
                page : {curr : 1}
            }) 
            return false;
        })
        
        //时间
        laydate.render({elem:'#created_at_start',type:'datetime'})
        laydate.render({elem:'#created_at_end',type:'datetime'})
        
    });
JS;
$this->registerJs($js);
